<template>
  <div id="cont">
    <div class="tab-detail">
      <Form ref="detail" :rules="formValidate" :label-width="140" :model="detail">
        <Row wrap style="align-items: flex-start;margin-bottom:5px;display:block;">
          <Col :lg="8" :xs="24">
          <FormItem prop="image" :label-width="50">
            <div class="detail-image-box">
              <viewer :images="detail.image">
                <img style="max-width:100%;max-height:230px" :src="detail.image" alt="" readonly />
              </viewer>
            </div>
          </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
          <FormItem label="编号" prop="sn">
            <Input v-model="detail.sn" readonly />
          </FormItem>
          <FormItem label="型号" prop="model">
            <Input v-model="detail.model" readonly />
          </FormItem>
          <FormItem label="供应商" prop="supplier">
            <Input v-model="detail.supplier" readonly />
          </FormItem>
          <FormItem label="类型" prop="gearboxType">
            <Input v-model="detail.gearboxType" readonly />
          </FormItem>
          <FormItem label="额定功率(kW)" prop="ratedPower">
            <Input type="number" v-model.number="detail.ratedPower" style="width:100%" :max="3000" :min="0" readonly />
          </FormItem>

          <FormItem label="最大输入扭矩(Nm)" prop="maxInputTorque">
            <Input type="number" v-model.number="detail.maxInputTorque" style="width:100%" :max="5000" :min="0"
              readonly />
          </FormItem>
          <FormItem label="额定输入转速(rpm)" prop="ratedInputSpeed">
            <Input type="number" v-model.number="detail.ratedInputSpeed" style="width:100%" :max="15000" :min="0"
              readonly />
          </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
          <FormItem label="最高输入转速(rpm)" prop="maxInputSpeed">
            <Input type="number" v-model.number="detail.maxInputSpeed" style="width:100%" :max="15000" :min="0"
              readonly />
          </FormItem>
          <FormItem label="最低输入转速(rpm)" prop="minInputSpeed">
            <Input type="number" v-model.number="detail.minInputSpeed" style="width:100%" :max="15000" :min="0"
              readonly />
          </FormItem>
          <FormItem label="最高输出转速(rpm)" prop="maxOutputSpeed">
            <Input type="number" v-model.number="detail.maxOutputSpeed" style="width:100%" :max="15000" :min="0"
              readonly />
          </FormItem>
          <FormItem label="前进挡位数" prop="forwardGearNumber">
            <Input type="number" v-model.number="detail.forwardGearNumber" style="width:100%" :max="50" :min="0"
              readonly />
          </FormItem>
          <FormItem label="倒挡数" prop="reverseGearNumber">
            <Input type="number" v-model.number="detail.reverseGearNumber" style="width:100%" :max="50" :min="0"
              readonly />
          </FormItem>
          <FormItem label="重量(kg)" prop="weight">
            <Input type="number" v-model.number="detail.weight" style="width:100%" :max="3000" :min="0" readonly />
          </FormItem>
          <FormItem :label-width="30">
            其他人是否可见
            <i-switch v-model="detail.isIndexShow" :true-value="1" :false-value="0" disabled />
            其他人是否可用
            <i-switch v-model="detail.otherCanUse" :true-value="1" :false-value="0" disabled />
          </FormItem>
          </Col>
        </Row>
      </Form>
    </div>

    <Collapse v-model="collapseData">

      <Panel name="1">
        速比参数表
        <div slot="content">
          <SpeedList :gearboxId="gearboxId" :isUpdate="isUpdate" :gearboxData="detail"></SpeedList>
        </div>
      </Panel>

      <Panel name="2">
        效率MAP
        <div slot="content">
          <ProductivenessMap :gearboxId="gearboxId" :isUpdate="isUpdate"></ProductivenessMap>
        </div>
      </Panel>

      <Panel name="3">
        换挡MAP
        <div slot="content">
          <ShiftGearMap :gearboxId="gearboxId" :isUpdate="isUpdate"></ShiftGearMap>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
import { gearboxEfficiencyApi } from "@/api/gearbox-efficiency";
import { gearboxShiftApi } from "@/api/gearbox-shift";
import { gearboxApi } from "@/api/gearbox";
import XLSX, { WorkSheet } from "xlsx";

import ProductivenessMap from "./productiveness-map.vue";
import ShiftGearMap from "./shift-gear-map.vue";
import SpeedList from "./speed-list.vue";
export default {
  name: "TorqueConverterLambda",
  components: {
    ProductivenessMap,
    SpeedList,
    ShiftGearMap
  },
  props: {},
  data() {
    return {
      collapseData: ["1", "2", "3"],
      detail: {}, // 详情信息
      gearboxId: null,
      tableData: [], // 表格列表数据
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
        listPage: []
      },
      tableData1: [], // 表格列表数据1
      tablePage1: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
        listPage: []
      },
      tableData2: [], // 表格列表数据2
      tablePage2: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
        listPage: []
      },
      loading: false,
      // 表单验证
      formValidate: {
        // 编号
        sn: [{ required: true, message: "请输入编号", trigger: "change" }],
        // 型号
        model: [{ required: true, message: "请输入型号", trigger: "change" }],

        // 类型
        gearboxType: [
          { required: true, message: "请输入类型", trigger: "change" }
        ],
        // 额定功率(kW)
        ratedPower: [
          {
            type: "number",
            required: true,
            message: "请输入额定功率(kW)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        // 最大输入扭矩(Nm)
        maxInputTorque: [
          {
            type: "number",
            required: true,
            message: "请输入最大输入扭矩(Nm)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 5000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        // 额定输入转速(rpm)
        ratedInputSpeed: [
          {
            type: "number",
            required: true,
            message: "请输入额定输入转速(rpm)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        maxInputSpeed: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        minInputSpeed: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        maxOutputSpeed: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        forwardGearNumber: [
          {
            type: "number",
            min: 0,
            max: 50,
            message: "请输入0到50的数字",
            trigger: "change"
          }
        ],

        weight: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        // 前进挡位数
        forwardGearNumber: [
          {
            type: "number",
            required: true,
            message: "请输入前进挡位数",
            trigger: "change"
          }
        ],
        // 倒挡数
        reverseGearNumber: [
          {
            type: "number",
            required: true,
            message: "请输入倒挡数",
            trigger: "change"
          }
        ],
        // 更新时间
        updateIme: [
          { required: true, message: "请输入更新时间", trigger: "change" }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }],
        isUpdate: false
      }
    };
  },
  watch: {},
  filters: {},
  created() {
    this.gearboxId = this.$route.query.id;
    this.getById();
  },
  mounted() { },
  methods: {
    // 根据ID获取详情
    getById() {
      gearboxApi.getById(this.gearboxId).then(res => {
        console.log("11--->", res);
        this.detail = res.data;
        this.detail.createUser == this.$store.state.user.userLoginInfo.id
          ? (this.isUpdate = true)
          : (this.isUpdate = false);
      });
    },
    // 翻页
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.findList();
    },

    findList() {
      // 总数据
      this.tablePage.totalResult = this.tableData.length;
      this.tablePage.listPage = this.tableData.slice(
        (this.tablePage.currentPage - 1) * this.tablePage.pageSize,
        this.tablePage.currentPage * this.tablePage.pageSize
      );
    },

    exportExcel1() {
      const workBook = XLSX.utils.table_to_book(
        this.$refs.xTable.$el.querySelector(".body--wrapper>.vxe-table--body")
      );
      XLSX.writeFile(workBook, "效率MAP.xlsx");
    },
    exportExcel2() {
      const workBook = XLSX.utils.table_to_book(
        this.$refs.xTable1.$el.querySelector(".body--wrapper>.vxe-table--body")
      );
      XLSX.writeFile(workBook, "换挡MAP1.xlsx");
    },
    exportExcel3() {
      const workBook = XLSX.utils.table_to_book(
        this.$refs.xTable2.$el.querySelector(".body--wrapper>.vxe-table--body")
      );
      XLSX.writeFile(workBook, "换挡MAP2.xlsx");
    },

    /**
     * @desc 添加行数据
     */
    addRow() {
      const $table = this.$refs.xTable;
      const record = {
        gear: null,
        inputSpeed: null,
        unloadLoss: null,
        loadLossCoefficient: null,
        index: this.tableData.length
      };
      this.tableData.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "gear");
      // this.reRenderTable()
    },

    /**
     * @desc 删除行数据
     */
    async delRow() {
      const { rows } = await this.$refs.xTable.removeCheckboxRow();
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.tableData.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.tableData = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },

    saveData() {
      // 数据验证
      if (!(this.tableData && this.tableData.length > 0)) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }
      // 挡位
      const gear = this.tableData.map(item => item.gear);
      // 输入转速(rpm)
      const inputSpeed = this.tableData.map(item => item.inputSpeed);
      // 空载损失(kW)
      const unloadLoss = this.tableData.map(item => item.unloadLoss);
      // 负载损失系数(%)
      const loadLossCoefficient = this.tableData.map(
        item => item.loadLossCoefficient
      );

      // 变速箱_id
      const gearboxId = this.gearboxId;

      const param = {
        gear: JSON.stringify(gear),
        inputSpeed: JSON.stringify(inputSpeed),
        unloadLoss: JSON.stringify(unloadLoss),
        loadLossCoefficient: JSON.stringify(loadLossCoefficient),
        tableData: JSON.stringify(this.tableData),
        gearboxId: gearboxId
      };
      gearboxEfficiencyApi.addGearboxEfficiency(param).then(res => {
        this.$Message.warning("保存成功");
      });
    },

    /**
     * 初始化列表数据
     */
    initData() {
      gearboxEfficiencyApi.getByGearboxId(this.gearboxId).then(res => {
        console.log("---->>>", res);
        const data = res.data;
        if (data) {
          // 组合table数据
          const tableData = JSON.parse(data.tableData);
          if (tableData && tableData.length > 0) {
            this.tableData = tableData;
          } else {
            return;
          }
          this.renderEchart();
        }
      });
    },

    /// /////////////////////////////////////////第一个曲线 end

    /**
     * @desc 添加行数据
     */
    addRow1() {
      const $table = this.$refs.xTable1;
      const record = {
        index: this.tableData1.length,
        pedal: null,
        gear12UpshifttingSpeed: null,
        gear23UpshifttingSpeed: null,
        gear34UpshifttingSpeed: null,
        gear45UpshifttingSpeed: null,
        gear56UpshifttingSpeed: null
      };
      this.tableData1.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "pedal");
    },
    addRow2() {
      const $table = this.$refs.xTable2;
      const record = {
        index: this.tableData1.length,
        pedal: null,
        gear21UpshifttingSpeed: null,
        gear32UpshifttingSpeed: null,
        gear43UpshifttingSpeed: null,
        gear54UpshifttingSpeed: null,
        gear65UpshifttingSpeed: null
      };
      this.tableData2.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "pedal");
    },
    /**
     * @desc 删除行数据
     */
    async delRow1() {
      const { rows } = await this.$refs.xTable1.removeCheckboxRow();
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.tableData1.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.tableData1 = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },
    async delRow2() {
      const { rows } = await this.$refs.xTable2.removeCheckboxRow();
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.tableData2.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.tableData2 = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },

    renderEchart1() {
      // 获取油门开度  y轴数据
      let yAxisData = null;

      const pedals1 = this.tableData1.map(item => item.pedal);
      const pedals2 = this.tableData2.map(item => item.pedal);
      if ((pedals2 && pedals2.length > 0) || (pedals1 && pedals1.length > 0)) {
        if (pedals2 && pedals2.length > 0) {
          if (pedals1 && pedals1.length > 0) {
            pedals2.forEach(item => {
              if (pedals1.indexOf(item) == -1) {
                pedals1.push(item);
              }
            });
            yAxisData = pedals1;
          } else {
            yAxisData = pedals2;
          }
        } else {
          yAxisData = pedals1;
        }
      } else {
        return;
      }

      // x轴数据
      const series = [];
      if (this.tableData1 && this.tableData1.length > 0) {
        const gear12UpshifttingSpeeds = this.tableData1.map(
          item => item.gear12UpshifttingSpeed
        );
        const gear23UpshifttingSpeeds = this.tableData1.map(
          item => item.gear23UpshifttingSpeed
        );
        const gear34UpshifttingSpeeds = this.tableData1.map(
          item => item.gear34UpshifttingSpeed
        );
        const gear45UpshifttingSpeeds = this.tableData1.map(
          item => item.gear45UpshifttingSpeed
        );
        const gear56UpshifttingSpeeds = this.tableData1.map(
          item => item.gear56UpshifttingSpeed
        );
        if (gear12UpshifttingSpeeds && gear12UpshifttingSpeeds.length > 0) {
          series.push({
            name: "1-2",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2,
              type: "dashed"
            },
            data: gear12UpshifttingSpeeds
          });
        }
        if (gear23UpshifttingSpeeds && gear23UpshifttingSpeeds.length > 0) {
          series.push({
            name: "2-3",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2,
              type: "dashed"
            },
            data: gear23UpshifttingSpeeds
          });
        }
        if (gear34UpshifttingSpeeds && gear34UpshifttingSpeeds.length > 0) {
          series.push({
            name: "3-4",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2,
              type: "dashed"
            },
            data: gear34UpshifttingSpeeds
          });
        }
        if (gear45UpshifttingSpeeds && gear45UpshifttingSpeeds.length > 0) {
          series.push({
            name: "4-5",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2,
              type: "dashed"
            },
            data: gear45UpshifttingSpeeds
          });
        }
        if (gear56UpshifttingSpeeds && gear56UpshifttingSpeeds.length > 0) {
          series.push({
            name: "5-6",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2,
              type: "dashed"
            },
            data: gear56UpshifttingSpeeds
          });
        }
      }
      if (this.tableData2 && this.tableData2.length > 0) {
        const gear21UpshifttingSpeeds = this.tableData2.map(
          item => item.gear21UpshifttingSpeed
        );
        const gear32UpshifttingSpeeds = this.tableData2.map(
          item => item.gear32UpshifttingSpeed
        );
        const gear43UpshifttingSpeeds = this.tableData2.map(
          item => item.gear43UpshifttingSpeed
        );
        const gear54UpshifttingSpeeds = this.tableData2.map(
          item => item.gear54UpshifttingSpeed
        );
        const gear65UpshifttingSpeeds = this.tableData2.map(
          item => item.gear65UpshifttingSpeed
        );
        if (gear21UpshifttingSpeeds && gear21UpshifttingSpeeds.length > 0) {
          series.push({
            name: "2-1",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            data: gear21UpshifttingSpeeds
          });
        }
        if (gear32UpshifttingSpeeds && gear32UpshifttingSpeeds.length > 0) {
          series.push({
            name: "3-2",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            data: gear32UpshifttingSpeeds
          });
        }
        if (gear43UpshifttingSpeeds && gear43UpshifttingSpeeds.length > 0) {
          series.push({
            name: "4-3",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            data: gear43UpshifttingSpeeds
          });
        }
        if (gear54UpshifttingSpeeds && gear54UpshifttingSpeeds.length > 0) {
          series.push({
            name: "5-4",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            data: gear54UpshifttingSpeeds
          });
        }
        if (gear65UpshifttingSpeeds && gear65UpshifttingSpeeds.length > 0) {
          series.push({
            name: "6-5",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 2,
              shadowColor: "rgba(0,0,0,0.3)",
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            data: gear65UpshifttingSpeeds
          });
        }
      }

      const option = {
        legend: {
          data: ["1-2", "2-3", "3-4", "4-5", "5-6"]
        },
        tooltip: {
          trigger: "axis",
          formatter: "speed : <br/>{b}km"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          name: "车速(km/h)"
        },
        yAxis: {
          name: "油门开度",
          type: "category",
          axisLine: { onZero: false },
          /* axisLabel: {
                  formatter: '{value} %'
                }, */
          boundaryGap: false,
          data: yAxisData
        },
        series: series
      };

      let myChart = this.echarts.init(document.getElementById("b"));
      myChart.setOption(option);
    },

    saveData1() {
      // 数据验证
      if (
        !(this.tableData1 && this.tableData1.length > 0) &&
        !(this.tableData2 && this.tableData2.length > 0)
      ) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }

      // 变速箱_id
      const gearboxId = this.gearboxId;

      const param = {
        tableData1: JSON.stringify(this.tableData1),
        tableData2: JSON.stringify(this.tableData2),
        gearboxId: gearboxId
      };
      gearboxShiftApi.addGearboxShift(param).then(res => {
        this.$Message.warning("保存成功");
      });
    },
    initData1() {
      gearboxShiftApi.getByGearboxId(this.gearboxId).then(res => {
        const data = res.data;
        if (data) {
          // 组合table数据
          const tableData1 = JSON.parse(data.tableData1);
          if (tableData1 && tableData1.length > 0) {
            this.tableData1 = tableData1;
          }
          const tableData2 = JSON.parse(data.tableData2);
          if (tableData2 && tableData2.length > 0) {
            this.tableData2 = tableData2;
          }
          this.renderEchart();
        }
      });
    }
  }
};
</script>

<style>
.sortable-row-demo .drag-btn {
  cursor: move;
  font-size: 12px;
}

.sortable-row-demo .vxe-body--row.sortable-ghost,
.sortable-row-demo .vxe-body--row.sortable-chosen {
  background-color: #dfecfb;
}
</style>
<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.tab-detail {
  margin-bottom: 50px;
}

.tab-detail input {
  background-color: #f4f4f4 !important;
}

.tab-detail span {
  color: #000 !important;
}

.tab-detail i {
  display: none !important;
}

.detail-image-box {
  width: 100%;
  margin-bottom: 10px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}

.form-ex {
  margin-bottom: 20px;
}

.form-ex>div {
  width: 100px;
  display: inline;
}
</style>
